<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <p>EventBus</p>
        <div>
            <p>3</p>
            <p>end</p>
            <p>2</p>
            <p>4</p>
        </div>
        ------------
        <div>
            <p>3</p>
            <p>end</p>
            <p>4</p>
            <p>1</p>
        </div>
        <script>
            console.log('start');

            var p = function () {
                return new Promise(function (resolve, reject) {
                    const p1 = new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve(1);
                        }, 0);
                        resolve(2);
                    });
                    p1.then((res) => {
                        console.log(res);
                    });
                    console.log(3);
                    resolve(4);
                });
            };

            p().then((res) => {
                console.log(res);
            });
            console.log('end');
        </script>
    </body>
</html>
